<template>
  <el-form class="my-form" ref="meetings" :model="obj.meetings[0]" label-position="right" label-width="auto"
           :rules="rules"
           :disabled="oper === 'view' || oper === 'supplement'">
    <el-card class="update-log bgcolorgray" shadow="hover">
      <div class="report-form-list-content-1">
        <label class="form-label-title">{{ showEnumLabel('ExpenditureReimbursementFeetype', feetype) }}</label>
        <div class="report-form-list-content-1">
          <div class="report-form-list-content">
            <el-form-item label="会议通过文号" prop="meetingNotice">
              <el-input v-model="obj.meetings[0].meetingNotice" placeholder="请输入会议通过文号" />
            </el-form-item>
            <el-form-item label="会议计划" prop="meetingPlan">
              <el-input v-model="obj.meetings[0].meetingPlan" placeholder="请输入会议计划" />
            </el-form-item>
            <el-form-item label="会议地点" prop="meetingAddress">
              <el-input v-model="obj.meetings[0].meetingAddress" placeholder="请输入会议地点" />
            </el-form-item>
            <el-form-item label="会议类别" prop="meetingType">
              <el-input v-model="obj.meetings[0].meetingType" placeholder="请输入会议类别" />
            </el-form-item>
            <el-form-item label="会议开始时间" prop="meetingStart">
              <el-date-picker v-model="obj.meetings[0].meetingStart" type="datetime" placeholder="选择日期" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="会议结束时间" prop="meetingEnd">
              <el-date-picker v-model="obj.meetings[0].meetingEnd" type="datetime" placeholder="选择日期" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
            <el-form-item label="会议天数" prop="meetingDays">
              <el-input-number v-model="obj.meetings[0].meetingDays" placeholder="请输入会议天数" :min="0" :precision="0" />
            </el-form-item>
            <el-form-item label="参会部门" prop="meetingDepartments">
              <el-input v-model="obj.meetings[0].meetingDepartments" placeholder="请输入参会部门" />
            </el-form-item>
            <el-form-item label="参会人数" prop="meetingPeoples">
              <el-input-number v-model="obj.meetings[0].meetingPeoples" placeholder="请输入参会人数" :min="0" :precision="0" />
            </el-form-item>
            <el-form-item label="工作人员数" prop="meetingWorkers">
              <el-input-number v-model="obj.meetings[0].meetingWorkers" placeholder="请输入工作人员数" :min="0" :precision="0" />
            </el-form-item>
          </div>
          <div class="report-form-list-content-1">
            <el-divider />
          </div>
          <div class="report-form-list-content">
            <el-form-item label="住宿费" prop="amountHotel">
              <el-input-number v-model="obj.meetings[0].amountHotel" placeholder="请输入住宿费" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
            <el-form-item label="伙食费" prop="amountCatering">
              <el-input-number v-model="obj.meetings[0].amountCatering" placeholder="请输入伙食费" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
            <el-form-item label="交通费" prop="amountCar">
              <el-input-number v-model="obj.meetings[0].amountCar" placeholder="请输入交通费" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
            <el-form-item label="会议室租金" prop="amountRent">
              <el-input-number v-model="obj.meetings[0].amountRent" placeholder="请输入会议室租金" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
            <el-form-item label="文印费" prop="amountPaper">
              <el-input-number v-model="obj.meetings[0].amountPaper" placeholder="请输入文印费" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
            <el-form-item label="医药费" prop="amountMedicine">
              <el-input-number v-model="obj.meetings[0].amountMedicine" placeholder="请输入医药费" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
            <el-form-item label="其他费用" prop="amountOther">
              <el-input-number v-model="obj.meetings[0].amountOther" placeholder="请输入其他费用" :min="0" :precision="2" @change="calcTotal(obj.meetings[0])" />
            </el-form-item>
          </div>
          <div class="report-form-list-content-1">
            <el-form-item label="会议内容">
              <el-input v-model="obj.meetings[0].meetingContent" :rows="5" type="textarea" class="textarea-1" />
            </el-form-item>
          </div>
          <div class="report-form-list-content-1">
            <el-divider />
          </div>
          <div class="report-form-list-content-1 aggregate">
            <div style="margin: 10px 0;">
              <text style="margin: 0 20px;">会议天数: {{ totalDays }}</text>
              <text style="margin: 0 20px;">会议费用总计: ￥{{ totalAmount }}</text>
            </div>
          </div>
          <el-card class="update-log update-log-1 bgcolorgray" shadow="hover" v-if="obj.meetingFeeFileList.length > 0">
            <label class="form-label-div">发票信息</label>
            <div class="el-upload__tip">发票自动解析目前只支持PDF格式的增值税电子发票，如无法解析，还需要手动修改发票代码等信息。</div>
            <el-table :data="obj.meetingFeeFileList"
                      border
                      fit
                      highlight-current-row
                      tooltip-effect="dark">
              <el-table-column align="center" type="index" label="序号" width="60px" />
              <el-table-column align="center" label="业务环节" width="80px">
                <template v-slot="{row}">{{ showEnumLabel('ExpenditureFeetypeFileStage', row.stage) }}</template>
              </el-table-column>
              <!--
              <el-table-column align="center" label="发票控制级别" min-width="60px">
                <template v-slot="{row}">
                  <span style="color: #F56C6C" v-if="row.control === '1'">*</span>
                  {{ showEnumLabel('ExpenditureFeetypeFileControl', row.control) }}
                </template>
              </el-table-column>
              -->
              <el-table-column align="center" label="附件说明" min-width="155px">
                <template v-slot="{row}">
                  <div>{{ row.filename }}</div>
                  <div>
                    <span style="color: #F56C6C" v-if="row.control === '1'">*</span>
                    {{ showEnumLabel('ExpenditureFeetypeFileControl', row.control) }}
                  </div>
                  <div style="color: #999;font-size: 13px;">{{ row.remark }}</div>
                </template>
              </el-table-column>
              <!--
              <el-table-column align="center" label="是否发票" min-width="30px">
                <template v-slot="{row}">{{ showEnumLabel('CommonYesNo', row.needInvoice) }}</template>
              </el-table-column>
              -->
              <el-table-column align="center" label="文件" min-width="250px">
                <template v-slot="scope">
                  <div style="display: flex;justify-content: center;">
                    <el-button type="primary" plain style="margin-right:1rem;" @click="selectAttachmentBtn(scope.row, scope.$index)"><svg-icon icon-class="search" />选择已上传的文件</el-button>
                    <FileUpload :isShowTip="false" v-model="meetingsFiles" :isShowFileList="false" @uploadedSuccess="meetingsUploadedSuccessFn($event, scope.row, scope.$index)" v-if="scope.row.needInvoice === '0'" />
                    <InvoiceUpload :isShowTip="false" v-model="meetingsFiles" :isShowFileList="false" @uploadedSuccess="meetingsUploadedSuccessFn($event, scope.row, scope.$index)" v-else />
                  </div>
                  <ul class="files-url">
                    <li v-for="(item1, idx) in scope.row.itemFiles" :key="item1.id" :class="item1.isValidator || scope.row.needInvoice === '0' ? 'files-green' : 'files-red'">
                      <div class="file-text">
                        <div>
                          <span class="file-name">{{ item1.attachmentName }}</span>
                          <span class="file-kb">{{ bytesToSize(item1.attachmentSize) }}</span>
                        </div>
                        <div>
                          <span class="file-time">{{ showIdLabel(userList, item1.attachmentUploader, 'name') }}<span style="color:#333;">上传于</span>{{ item1.attachmentUpload }}</span>
                        </div>
                      </div>
                      <div class="file-btn">
                        <el-button type="primary" link @click="downloadFile(item1)">下载</el-button>
                        <el-button type="primary" link @click="handlePreview(item1)">预览</el-button>
                        <el-button type="danger" link @click="deleteBtn(obj.meetingFeeFileList, scope.$index, idx)">删除</el-button>
                        <el-popover placement="bottom" :width="900" trigger="click">
                          <template #reference>
                            <el-button type="primary" link v-show="scope.row.needInvoice !== '0'">发票详情</el-button>
                          </template>
                          <div class="report-form-list-content report-form-list-content-be">
                            <el-form-item label="发票代码" class="is-required">
                              <el-input v-model="item1.invoiceCode" @blur="codeValidatorFn(item1)" />
                            </el-form-item>
                            <el-form-item label="发票号码" class="is-required">
                              <el-input v-model="item1.invoiceNumber" @blur="codeValidatorFn(item1)" />
                            </el-form-item>
                            <el-form-item label="开票日期">
                              <el-input v-model="item1.invoiceDate" />
                            </el-form-item>
                            <el-form-item label="价税合计（元）">
                              <el-input-number v-model="item1.invoiceTotal" :min="0" :precision="2" />
                            </el-form-item>
                            <el-form-item label="校验码">
                              <el-input v-model="item1.invoiceValid" />
                            </el-form-item>
                            <el-form-item label="发票名称">
                              <el-input v-model="item1.invoiceBuyerName" />
                            </el-form-item>
                            <el-form-item label="价税合计(大写)">
                              <el-input v-model="item1.invoiceTotalText" />
                            </el-form-item>
                            <el-form-item label="价税合计(小写)">
                              <el-input v-model="item1.invoiceTotal" />
                            </el-form-item>
                            <el-form-item label="销售方名称">
                              <el-input v-model="item1.invoiceSellerName" />
                            </el-form-item>
                            <el-form-item label="销售方纳税人识别号">
                              <el-input v-model="item1.invoiceSeller" />
                            </el-form-item>
                            <el-form-item label="销售方开户行及账号">
                              <el-input v-model="item1.invoiceSellerBank" />
                            </el-form-item>
                            <el-form-item label="销售方地址/电 话">
                              <el-input v-model="item1.invoiceSellerInfo" />
                            </el-form-item>
                            <el-form-item label="收款人">
                              <el-input v-model="item1.invoicePayee" />
                            </el-form-item>
                            <el-form-item label="开票人">
                              <el-input v-model="item1.invoicePrinter" />
                            </el-form-item>
                            <el-form-item label="复核">
                              <el-input v-model="item1.invoiceApprover" />
                            </el-form-item>
                          </div>
                        </el-popover>
                      </div>
                    </li>
                  </ul>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </el-card>
  </el-form>
  <el-dialog v-model="attachmentVisible" title="附件预览" width="70%" top="2vh">
    <attachmentPreview v-model:attachmentId="previewAttachmentId" />
    <div style="text-align:right;">
      <el-button type="danger" @click="attachmentVisible = false">关闭</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="selectAttachmentVisible" title="选择文件" width="70%" top="2vh">
    <selectAttachmentMultiple :isVisible="selectAttachmentVisible" @selectAttachment="selectAttachmentFn" @close="selectAttachmentVisible = false"></selectAttachmentMultiple>
  </el-dialog>
</template>
<script setup>
import {computed, ref, watch} from 'vue'
import {doGet, doDownload} from '@/config/http'
import {
  svc,
  getListPageSize,
  showEnumLabel,
  bytesToSize,
  showIdLabel,
  customValidator,
  getDaysBetween
} from "@/config/common";
import attachmentPreview from '@/views/components/base/attachmentPreview.vue'
import selectAttachmentMultiple from '@/views/components/base/selectAttachmentMultiple.vue'
import initListStore from '@/store/modules/initList'

const props = defineProps({
  routeId: {
    type: String,
    default: ''
  },
  oper: {
    type: String,
    default: ''
  },
})

const feetype = ref('03')

let meetings = ref(null)

// 基本数据
const emptyMeeting = {
  expenditureReimbursementId: null, // 报账单ID
  meetingNotice: null, // 会议通知文号
  meetingPlan: null, // 会议计划
  meetingAddress: null, // 会议地点
  meetingType: null, // 会议类别
  meetingStart: null, // 会议开始日期
  meetingEnd: null, // 会议结束日期
  meetingDays: null, // 天数
  meetingDepartments: null, // 参会部门
  meetingPeoples: null, // 参会人数
  meetingWorkers: null, // 工作人员数
  meetingContent: null, // 会议内容
  amountHotel: 0, // 住宿费
  amountCatering: 0, // 伙食费
  amountRent: 0, // 会议上租金费
  amountCar: 0, // 交通费
  amountPaper: 0, // 文印费
  amountMedicine: 0, // 医药费
  amountOther: 0, // 其他费
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
  total: 0, // 总计金额
}

const rules = {
  expenditureReimbursementId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '报账单ID', trigger: ['blur', 'change'] }],
  meetingNotice: [{ required: true, validator: customValidator, min: 0, max: 200, label: '会议通知文号', trigger: ['blur', 'change'] }],
  meetingPlan: [{ required: true, validator: customValidator, min: 0, max: 20, label: '会议计划', trigger: ['blur', 'change'] }],
  meetingAddress: [{ required: true, validator: customValidator, min: 0, max: 500, label: '会议地点', trigger: ['blur', 'change'] }],
  meetingType: [{ required: false, validator: customValidator, min: 0, max: 20, label: '会议类别', trigger: ['blur', 'change'] }],
  meetingStart: [{ required: true, validator: customValidator, min: 0, max: 20, label: '会议开始日期', trigger: ['blur', 'change'] }],
  meetingEnd: [{ required: true, validator: customValidator, min: 0, max: 20, label: '会议结束日期', trigger: ['blur', 'change'] }],
  meetingDays: [{ required: true, validator: customValidator, min: 0, max: 3, label: '天数', trigger: ['blur', 'change'] }],
  meetingDepartments: [{ required: true, validator: customValidator, min: 0, max: 500, label: '参会部门', trigger: ['blur', 'change'] }],
  meetingPeoples: [{ required: true, validator: customValidator, min: 0, max: 3, label: '参会人数', trigger: ['blur', 'change'] }],
  meetingWorkers: [{ required: true, validator: customValidator, min: 0, max: 3, label: '工作人员数', trigger: ['blur', 'change'] }],
  meetingContent: [{ required: false, validator: customValidator, min: 0, max: 0, label: '会议内容', trigger: ['blur', 'change'] }],
  amountHotel: [{ required: true, validator: customValidator, min: 0, max: 13, label: '住宿费', trigger: ['blur', 'change'] }],
  amountCatering: [{ required: true, validator: customValidator, min: 0, max: 13, label: '伙食费', trigger: ['blur', 'change'] }],
  amountRent: [{ required: true, validator: customValidator, min: 0, max: 13, label: '会议上租金费', trigger: ['blur', 'change'] }],
  amountCar: [{ required: true, validator: customValidator, min: 0, max: 13, label: '交通费', trigger: ['blur', 'change'] }],
  amountPaper: [{ required: true, validator: customValidator, min: 0, max: 13, label: '文印费', trigger: ['blur', 'change'] }],
  amountMedicine: [{ required: true, validator: customValidator, min: 0, max: 13, label: '医药费', trigger: ['blur', 'change'] }],
  amountOther: [{ required: true, validator: customValidator, min: 0, max: 13, label: '其他费', trigger: ['blur', 'change'] }],
}

let currentData = ref({
  row: null,
  index: null
})
let obj = ref({
  meetings: [ Object.assign({}, emptyMeeting) ],
  meetingFeeFileList: []
})

let arrFiles = ref([])
// 发票信息必填项是否
let isValidator = ref(false)
let attachmentVisible = ref(false)
let previewAttachmentId = ref('')
let meetingsFiles = ref(null) // 明细附件

const emit = defineEmits(['contractsData'])

const userList = initListStore().userList

let selectAttachmentVisible = ref(false)

// initList()
watch(() => props.routeId, async val => {
  await initObj(val)
  // await initList()
},{immediate:true})

const totalAmount = computed(() => {
  let item = obj.value.meetings[0]
  calcTotal(item)
  return item.total
});

const totalDays = computed(() => {
  return calcDays()
})

function calcDays() {
  let days = getDaysBetween(obj.value.meetings[0].meetingStart, obj.value.meetings[0].meetingEnd)
  obj.value.meetings[0].meetingDays = days
  return days
}

// 获取下拉框数据列表
// async function initList() {
//   let p1 = doGet(svc, '/user/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1])
//   userList.value = resArray[0]['records']
// }

// 获取数据
async function initObj(id) {
  let list = await doGet(svc, '/expenditure-reimbursement-meeting/listByField', {field: 'expenditureReimbursementId', values: id}, false)
  if (list.length > 0) {
    list.map(item => calcTotal(item))
    obj.value.meetings = list
  }
  obj.value.meetingFeeFileList = await doGet(svc, '/expenditure-feetype-file/listByField', {field: 'expenditureFeetype', values: feetype.value}, false) // 费用类型附件
  if (id) {
    arrFiles.value = await doGet(svc, '/expenditure-reimbursement-item-file/listByField', {field: 'expenditureReimbursementId', values: id}, false)
    fileOnList(obj.value.meetingFeeFileList)
  }
  obj.value.meetingFeeFileList.sort((a, b) => {
    return a.stage !== b.stage ? a.stage - b.stage : a.control !== b.control ? a.control - b.control : a.needInvoice !== b.needInvoice ? b.needInvoice - a.needInvoice : b.weight - a.weight
  })
}

function calcTotal(item) {
  let total = 0
  total += item.amountCatering
  total += item.amountHotel
  total += item.amountCar
  total += item.amountRent
  total += item.amountPaper
  total += item.amountMedicine
  total += item.amountOther
  item.total = total
}

const UploadedSuccessFn = (file, item, index, arr, type) => {
  console.log('file',file)
  console.log('item',item)
  console.log('index',index)
  console.log('arr',arr)
  console.log('type',type)
  let filesObj
  if (item.needInvoice === '0') {
    //不是发票
    filesObj = {
      deleted: 0,	//删除标识(0未删除、1已删除)		false
      expenditureFeetypeFileId: item.id,	//报账费用类型附件ID		false
      expenditureReimbursementFeetype: type,	//报账单明细费用类型		false
      expenditureReimbursementItemId: null,	//报账单明细ID		false
      attachmentId: file.id,	//附件ID		false
      attachmentName: file.original,	//附件名称		false
      attachmentUrl: file.url,	//附件URL		false
      attachmentSize: file.size, //附件大小
      attachmentUpload: file.createTime, //附件上传时间
      attachmentUploader: file.uploader, //附件上传人
      isInvoice: 'false',	//是否发票
    }
  } else {
    // 是发票
    filesObj = {
      deleted: 0,	//删除标识(0未删除、1已删除)		false
      // expenditureReimbursementFeetype: type,	//报账单明细费用类型		false
      // expenditureReimbursementItemId: null,	//报账单明细ID		false
      // attachmentId: file.id,	//附件ID		false
      // attachmentName: file.original,	//附件名称		false
      // attachmentUrl: file.url,	//附件URL		false
      expenditureFeetypeFileId: item.id,	//报账费用类型附件ID		false
      expenditureReimbursementFeetype: type,	//报账单明细费用类型		false
      expenditureReimbursementItemId: null,	//报账单明细ID		false
      attachmentId: file.id,	//附件ID		false
      attachmentName: file.original,	//附件名称		false
      attachmentUrl: file.url,	//附件URL		false
      attachmentSize: file.size, //附件大小
      attachmentUpload: file.createTime, //附件上传时间
      attachmentUploader: file.uploader, //附件上传人

      // attachmentSize: file.attachmentSize, //附件大小
      // attachmentUpload: file.attachmentUpload, //附件上传时间
      // attachmentUploader: file.attachmentUploader, //附件上传人
      invoiceAmount: file.invoiceAmount,	//金额		false
      invoiceApprover: file.invoiceApprover,	//复核		false
      invoiceBuyer: file.invoiceBuyer,	//购买方纳税人识别号		false
      invoiceBuyerBank: file.invoiceBuyerBank,//	购买方开户行及账号		false
      invoiceBuyerInfo: file.invoiceBuyerInfo,	//购买方地址电话		false
      invoiceBuyerName: file.invoiceBuyerName,//	购买方名称		false
      invoiceCode: file.invoiceCode,	//发票代码		false
      invoiceDate: file.invoiceDate,	//开票日期		false
      invoiceMachine: file.invoiceMachine,	//机器编号		false
      invoiceNumber: file.invoiceNumber,	//发票号码		false
      invoicePayee: file.invoicePayee,	//收款人		false
      invoicePrinter: file.invoicePrinter,	//开票人		false
      invoiceRate: file.invoiceRate,	//税额		false
      invoiceSeller: file.invoiceSeller,	//销售方纳税人识别号		false
      invoiceSellerBank: file.invoiceSellerBank,	//销售方开户行及账号		false
      invoiceSellerInfo: file.invoiceSellerInfo,	//销售方地址电话		false
      invoiceSellerName: file.invoiceSellerName,	//销售方名称		false
      invoiceTotal: file.invoiceTotal,	//价税合计		false
      invoiceTotalText: file.invoiceTotalText,	//价税合计(大写)		false
      invoiceValid: file.invoiceValid,	//校验码		false
      isInvoice: 'true',	//是否发票		false
      isValidator: file.invoiceCode && file.invoiceNumber ? true : false
    }
  }
  if (!arr[index].itemFiles) {
    arr[index].itemFiles = []
  }
  arr[index].itemFiles.push(filesObj)
}

const fileOnList = (arr) => {
  arr.forEach(item => {
    arrFiles.value.forEach(file => {
      if(item.needInvoice === '1') {
        file.isValidator = file.invoiceCode && file.invoiceNumber ? true : false
      }
    })
    item.itemFiles = arrFiles.value.filter(item1 => item1.expenditureFeetypeFileId === item.id)
  })
}

const codeValidatorFn = (obj) => {
  isValidator.value = obj.invoiceCode !== '' && obj.invoiceNumber !== ''
  obj.isValidator = !!isValidator.value
}

const meetingsUploadedSuccessFn = (file, item, index) => {
  UploadedSuccessFn(file, item, index, obj.value.meetingFeeFileList, feetype.value)
}

const downloadFile = (row) => {
  doDownload(svc, '/customAttachment/download/' + row.attachmentId, {})
}
const handlePreview = (file) => {
  attachmentVisible.value = true
  setTimeout(() => {
    previewAttachmentId.value = file.attachmentId
  },100)
}
const deleteBtn = (arr, index, idx) => {
  arr[index].itemFiles.splice(idx, 1)
}

// 已上传文件
const selectAttachmentBtn = (row,index) => {
  console.log('row------------',row)
  selectAttachmentVisible.value = true
  currentData.value.row = row
  currentData.value.index = index
}

const selectAttachmentFn = (list) => {
  if (list.length > 0) {
    list.map( async item => {
      let file = await doGet(svc, '/customAttachment/extractInvoice/' + item.attachmentId, {}, false)
      UploadedSuccessFn(file, currentData.value.row, currentData.value.index, obj.value.meetingFeeFileList, feetype.value)
    })
  }
}

async function handleValidate() {
  return await meetings.value.validate().catch((err)=>{return err})
}

let meetingsData = obj.value

defineExpose({
  meetingsData,
  handleValidate,
})
</script>
<style scoped>
.files-url {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.files-url li {
  list-style-type: none;
  margin: 5px;
  padding: 0;
}
.files-url li.files-green {
  border: 1px solid #1ab394;
  background-color: #eaffea;
}
.files-url li.files-red {
  border: 1px solid #F56C6C;
  background-color: #fcf3f3;
}
.files-url li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
}
.files-url li span {
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
}
.el-upload__tip {
  padding: 10px 0;
  color: #F56C6C;
}
.bgcolorgray {
  background-color: #fafafa;
}
.form-label-title {
  display: block;
  font-size: 24px;
  text-align: center;
  width: 100%;
  color: #3340cc;
  height: 40px;
  line-height: 32px;
  margin: 0 0 20px 0;
  box-sizing: border-box;
  font-weight: bold;
}
.update-log {
  width: 100%;
  margin: 30px 0;
}
.update-log-1 {
  margin-top: 0;
}
</style>
